<template>
  <div class="loading" @click="loadingClick" v-if="mainStore.isLoading">
    <div class="bg">
        <img src="@/assets/images/loading.gif" alt="">

    </div>
  </div>
</template>
<script setup>
  import useMainStore from '@/store/modules/main.js'

  const mainStore = useMainStore()
  const loadingClick = () =>{
    mainStore.isLoading = false
  }
</script>
<style lang="less" scoped>
/*局部css 支持css3 可以改变elementUI组件的样式 且组件样式调整只在本页面生效**/
/*主样式*/
.loading {
  position: fixed;

  z-index: 999;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.2);
  .bg{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
    // background: #bbbbbe;
    // background: url(@/assets/images/);
    img{
      width: 70px;
      height: 70px;
    }

  }
}
</style>
